import html2canvas from "html2canvas";

/**
 * 生成直线方程函数
 * @param d1
 * @param d2
 * @return {function(*): *}
 */
export function getLineEquation(d1, d2) {
    const k = (d1.y - d2.y) / (d1.x - d2.x);
    const b = d1.y - k * d1.x;
    return y => {
        return (y - b) / k;
    };
}

/**
 * 批量设置元素属性
 * @param el
 * @param attrs
 */
export const batchSetStyle = (el, attrs) => {
    for (const key in attrs) {
        if (attrs.hasOwnProperty(key)) {
            el.style[key] = attrs[key];
        }
    }
};

/**
 * 把HTML转化图片
 * @param element
 * @param startPosition
 * @param targetPosition
 * @param duration
 * @param callback
 */
export function transformToImage({element, startPosition, targetPosition, duration, callback}) {
    // TODO 待优化如果不需要拷贝直接弄一个固定元素放在这里
    console.time('transformToImage');

    html2canvas(element).then(function (canvas) {
        const initPosition = {
            position: 'absolute',
            // eslint-disable-next-line no-use-before-define
            left: startPosition.left + 'px',
            // eslint-disable-next-line no-use-before-define
            top: startPosition.top + 'px',
            zIndex: '999',
            transform: 'scale(0.85)',
            transformOrigin: '20% center 0',
        };
        batchSetStyle(canvas, initPosition);
        document.body.appendChild(canvas);
        // container.current.appendChild(canvas);
        console.timeEnd('transformToImage');
        configAnimate({
            element: canvas,
            startPosition,
            targetPosition,
            duration,
            callback
        })
    });
}

export const configAnimate = ({element, startPosition, targetPosition, duration, callback}) => {

    duration = duration || 1000;
    // 计算预计运行次数， 频率60赫兹每秒60次
    const renderCount = Math.floor((duration / 1000) * 60);
    const tcg = Math.abs(targetPosition.top - startPosition.top) / renderCount;
    // 这里是生成直线方程式为了通过Top值拿到left值
    // 从而让元素沿着直线方向运行
    const countTopFunc = getLineEquation(
        {
            x: startPosition.left,
            y: startPosition.top
        },
        {
            x: targetPosition.left,
            y: targetPosition.top,
        },
    );

    let start;

    console.time('startAnimate');

    let requestAnimationFrameTimer;
    // 每次运行的动画帧操作
    const step = timestamp => {
        if (!start) {
            start = timestamp;
        }
        const elapsed = timestamp - start;

        const currentInfo = element.getBoundingClientRect();

        // 根据纵坐标算出横向坐标
        const y = currentInfo.top + tcg;
        const x = countTopFunc(y);

        if (currentInfo.left < targetPosition.left) {
            element.style.left = x + 'px';
        }

        if (currentInfo.top < targetPosition.top) {
            element.style.top = y + 'px';
        }

        if (elapsed < duration) {
            window.requestAnimationFrame(step);
        } else {
            element.remove();
            callback();
            console.timeEnd('startAnimate');
            window.cancelAnimationFrame(requestAnimationFrameTimer);
        }
    };
    requestAnimationFrameTimer = window.requestAnimationFrame(step);
};

export function runAnimate({element, startPosition, targetPosition, duration, callback}) {
    transformToImage({element, startPosition, targetPosition, duration, callback})
}